<script lang="ts">
  export default {
    name: 'Cart',
  };
</script>

<script setup lang="ts">
  import { computed, onMounted, ref, unref } from 'vue';
  import { showConfirmDialog, showToast, showLoadingToast, closeToast } from 'vant';
  import { useRouter } from 'vue-router'
  import API_BANNER from '@/apis/banner';
  import { useWebAppNavigation } from 'vue-tg'
  onMounted(() => {
    getSeriveList()
    getBannerList()
  });
  let router = useRouter()
  const bannerList = ref([])
  const params = ref({
    page: 1,
    limit: 10
  })
  const loading = ref(false);
  const finished = ref(false);

  const serviceList = ref([])
  function getBannerList () {
    API_BANNER.indexCarousel().then((res) => {
      bannerList.value = res.data || [];
    });
  }
  //获取合作服务商列表
  const getSeriveList = async () => {
    let res = await API_BANNER.serviceList(params.value)
    if (res.code == 1) {
      serviceList.value = [...serviceList.value, ...res.data.data]

      if (res.data.data.length < params.value.limit) {
        finished.value = true
      } else {
        loading.value = false;
      }
    }
  }
  // 触底事件
  const onLoad = () => {
    console.log(123, 'a');
    params.value.page = params.value.page + 1
    getSeriveList()
  }
  // 内部页
  const goPage = (url, data) => {
    if (data) {
      router.push({
        path: url,
        query: {
          id: data
        }
      })
    } else {
      router.push({
        path: url,
      })
    }
  }
  // 外部页 tg内为iframe
  const onBannerClicked = (url) => {
    let { openLink, openTelegramLink } = useWebAppNavigation()
    openLink(url)
  }

</script>

<template>
  <div class="container">
    <div>
      <div class="swiper">
        <van-swipe :autoplay="5000" class="swiper" height="150" :show-indicators="false">
          <van-swipe-item v-for="item in bannerList" :key="item.id" class="swiper-item"
            style="border-radius: 12px; overflow: hidden; " @click="onBannerClicked(item.jump_url)">
            <van-image class="swiper-item-img" :src="item.image" :alt="item.title" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div>
        <h4 style="color: #fff;">{{$t('home.serviceProvider')}}</h4>
      </div>
      <div class="Service">
        <van-list v-model:loading="loading" :finished="finished" loading-text="loading"
          :finished-text="$t('home.noMore')" @load="onLoad" offset="50" :immediate-check="false">
          <div class="Service_item flex al-center" v-for="i in serviceList" :key="i.id"
            @click="goPage('/serviceDetail',i.id)">
            <div style="width: 60px;height: 60px;border-radius: 6px;margin-right: 10px;">
              <img :src="i.image" alt="" style="width: 100%;height: 100%;">
            </div>
            <div class="right">
              <div>{{i.title}}</div>
              <div class="content">......</div>
            </div>
          </div>
        </van-list>

      </div>
    </div>
    <div style="height: 50px;"></div>
    <!-- 底部导航栏 -->
    <Tabbar />
  </div>
</template>

<style lang="less" scoped>
  .container {
    padding: 20px;
    background: url("@/assets/img/gameBj.jpg")no-repeat;
    background-size: 100% 100%;

    .swiper {
      width: 100%;
      height: 150px;
      margin-bottom: 10px;

      &-item,
      &-item-img {
        width: 100%;
        height: 100%;
      }
    }

    .Service {
      .Service_item {
        background-color: #fff;
        padding: 12px;
        border-radius: 8px;
        margin-bottom: 16px;

        .right {
          .content {
            color: #969696;
          }
        }
      }
    }
  }
</style>